<template>
	<!-- 地址选择 -->
	<u-popup :show="show" @close="getClose" closeable :round="10">
		<view class="addressBox">
			<view class="addressBox-header">地址选择</view>
			<view class="addressSelection">
				<!-- 省 -->
				<view class="addressSelection-item">
					<view
						class="item"
						:class="[provinceId == item.id ? 'active' : '']"
						v-for="(item, index) in provinceListData"
						:key="item.id"
						@click="changeAddress(item.id, 'province')"
					>
						{{ item.name }}
					</view>
				</view>
				<!-- 市 -->
				<view class="addressSelection-item" style="border-left: 1px #f3f3f3 solid; border-right: 1px #f3f3f3 solid; padding: 0px 20rpx">
					<view class="item" :class="[cityId == item.id ? 'active' : '']" v-for="(item, index) in cityListData" :key="item.id" @click="changeAddress(item.id, 'city')">
						{{ item.name }}
					</view>
				</view>
				<!-- 区 -->
				<view class="addressSelection-item">
					<view class="item" :class="[areaId == item.id ? 'active' : '']" v-for="(item, index) in areaListData" :key="item.id" @click="changeAddress(item.id, 'area')">
						{{ item.name }}
					</view>
				</view>
			</view>
			<view class="addressBox-btn">
				<view class="btn">取消</view>
				<view class="btn active" @click="subAddress">确认选择</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
import { commonArea } from '../../api/home/index.js';
export default {
	name: 'hwxcAddressSelection',
	data() {
		return {
			show: false
		};
	},
	props: {
		// 省ID
		provinceId: {
			type: Number | String,
			default: 0
		},
		// 市ID
		cityId: {
			type: Number | String,
			default: 0
		},
		// 区域ID
		areaId: {
			type: Number | String,
			default: 0
		},
		provinceListData: {
			type: Array,
			default: () => []
		},
		cityListData: {
			type: Array,
			default: () => []
		},
		areaListData: {
			type: Array,
			default: () => []
		}
	},
	computed: {
		bottomStyle() {
			const systemInfo = uni.getSystemInfoSync();
			const { safeAreaInsets } = systemInfo;
			const bottomSafeAreaHeight = safeAreaInsets.bottom || 0;
			return `padding-bottom: ${bottomSafeAreaHeight ? bottomSafeAreaHeight + 'px' : '20rpx'}`;
		}
	},
	methods: {
		getClose() {
			this.show = false;
		},
		
		changeAddress(id, type) {
			this.$emit('changeAddress',{
				id,
				type
			})
		},

		subAddress() {
			if (!this.provinceId) {
				return uni.showToast({
					title: '请选择省份',
					icon: 'none'
				});
			}
			if (!this.cityId) {
				return uni.showToast({
					title: '请选择市',
					icon: 'none'
				});
			}
			if (!this.areaId) {
				return uni.showToast({
					title: '请选择区域',
					icon: 'none'
				});
			}
			this.show = false;
			this.$emit('subAddress');
		}
	}
};
</script>

<style scoped lang="scss">
.addressBox {
	box-sizing: border-box;
	padding: 0px 20rpx;
	.addressBox-header {
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #444;
	}

	.addressSelection {
		height: 40vh;
		display: flex;
		gap: 10px;
		.addressSelection-item {
			flex: 1;
			background-color: #fff;
			height: 100%;
			overflow-y: scroll;
			.item {
				padding: 10px 0px;
				text-align: center;
				font-size: 26rpx;
				border-radius: 8rpx;
				color: #444;
			}

			.active {
				background-color: rgb(253, 226, 226);
				color: #e43927;
			}
		}
	}

	.addressBox-btn {
		display: flex;
		gap: 10px;
		box-sizing: border-box;
		padding: 20rpx 0px;
		.btn {
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 28rpx;
			background-color: #f3f3f3;
			color: #444;
			border-radius: 5px;
		}
		.active {
			background-color: #e43927;
			color: #fff;
		}
	}
}
</style>
